<template>
  <div class="charing">
    <div class="detail-contant">
      <img :src="free" class="detail-img" v-if="data.status == 1">
      <img :src="ing" class="detail-img" v-if="data.status == 2">
      <img :src="warm" class="detail-img" v-if="data.status == 3">
       <img :src="warm" class="detail-img" v-if="data.status == 0">
      <div class="no-contant">
        <div>{{ID}} 插头</div>
        <div class="select" v-if="data.status==1" @click="change(3)">
          <u>维护</u>
        </div>
        <div class="select" v-if="data.status==3" @click="change(1)">
          <u>停止维护</u>
        </div>
      </div>
      <div class="progress">
        <div class="space"></div>
        <div
          :class="data.status==2?'line':data.status==1?'free-line':'warm-line'"
          :style="{'height':percent}"
        ></div>
      </div>
      <div class="ing-status" v-if="data.status == 2">
        <div class="now">
          <span>充电中</span>
        </div>
        <div class="num">{{data.power}}W</div>
        <div class="time">{{time}}</div>
      </div>
      <div class="free-status" v-if="data.status == 1">
        <div class="now">
          <span>空闲中</span>
        </div>
        <div class="num">可接入</div>
      </div>
      <div class="warm-status" v-if="data.status == 3">
        <div class="now">
          <span>故障中</span>
        </div>
        <div class="num">不可用</div>
      </div>
      <div class="warm-status" v-if="data.status == 0">
        <div class="now">
          <span>已离线</span>
        </div>
        <div class="num">不可用</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "./index.less";
</style>

<script>
import { mapActions } from "vuex";
export default {
  name: "Charing",
  data() {
    return {
      free: require("../../assets/free.png"),
      ing: require("../../assets/ing.gif"),
      warm: require("../../assets/warm.png")
    };
  },
  methods: {
    ...mapActions("PayType", ["setID"]),
    jumpTo(path) {
      if (this.data.status == 3) {
        return;
      }
      this.setID(this.data.id);
      this.$router.push({
        path: path,
        query: {}
      });
    },
    // 转化时分秒
    trunTime(result) {
      let h =
        Math.floor(result / 3600) < 10
          ? "0" + Math.floor(result / 3600)
          : Math.floor(result / 3600);
      let m =
        Math.floor((result / 60) % 60) < 10
          ? "0" + Math.floor((result / 60) % 60)
          : Math.floor((result / 60) % 60);
      let s =
        Math.floor(result % 60) < 10
          ? "0" + Math.floor(result % 60)
          : Math.floor(result % 60);
      return (result = h + ":" + m + ":" + s);
    },
    change(type) {
      if (type == 1) {
        this.$dialog.confirm({
          title: "请确认",
          mes: "是否停止维护",
          opts: () => {
            this.postData(type);
          }
        });
      } else {
        this.$dialog.confirm({
          title: "请确认",
          mes: "是否进行维护",
          opts: () => {
            this.postData(type);
          }
        });
      }
    },
    postData(status) {
      this.$dialog.loading.open("正在设置");
      this.$http
        .post("/socket/Repair", {
          status: status,
          id: this.data.id
        })
        .then(res => {
          console.log(res.data.errno);
          if (res.data.errno == 0) {
            this.$dialog.toast({
              mes: "成功",
              timeout: 1500,
              icon: "success"
            });
            this.data.status = status;
          } else {
            this.$dialog.toast({
              mes: "失败",
              timeout: 1500,
              icon: "error"
            });
          }
          this.$dialog.loading.close();
        });
    }
  },
  computed: {
    // 更新时间
    time() {
      // 获取当前时间戳
      const now = parseInt(new Date().getTime() / 1000, 10);
      let showTime = now - this.data.starttime;
      showTime = this.trunTime(showTime);
      return showTime;
    },
    percent() {
      let res = this.data.power / this.data.maxpower;
      res = res * 100;
      res = res + "%";
      return res;
    },
    ID() {
      let res = 0;
      if (this.data.s_code <= 9) {
        res = "0" + this.data.s_code;
      } else {
        res = this.data.s_code;
      }
      return res;
    }
  },
  props: ["data"],
  created() {}
};
</script>